<template>
    <div class="page-container">
        <div class="asider">
            <ul>
                <li>
                    <router-link to="/home/index" tag="a">首页</router-link>
                </li>
                 <li>
                    <router-link to="/home/todos" tag="a">todos</router-link>
                </li>
            </ul>
        </div>
        <div class="page-layout">
            <div class="header">
                头部
            </div>
            <div class="content">
                <div class="bread-crumb">
                    面包屑
                </div>
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
    .page-container{
        width: 100%;
        height: 100%;
        display: flex;
        background-color: #f3f4f5;
        .asider{
            background-color: white;
            width: 210px;
            height: 100%;
        }
        .page-layout{
            width: 100%;
            position: relative;
            .header{
                background-color: blue;
                height: 60px;
            }
            .content{
                background-color: green;
                position: absolute;
                top:60px;
                right: 0;
                bottom: 0;
                left: 0;

            }
        }
    }
</style>